<template>
	<div class="resource-apply-detail">
		<Crumbs title="资源申请工单"/>
		<div class="main">
			<el-row>
				<el-form :inline="true" :model="formData" size="small">
					<el-form-item label="工单类型" required>
						<el-select v-model="formData.type" placeholder="工单类型">
							<el-option label="PaaS资源申请" value="paas"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="工单描述" required>
						<el-input v-model="formData.desc" placeholder=""></el-input>
					</el-form-item>
					<el-form-item label="优先级" required>
						<el-select v-model="formData.priority" placeholder="优先级">
							<el-option label="紧急" value="urgent"></el-option>
							<el-option label="高" value="high"></el-option>
							<el-option label="中" value="in"></el-option>
							<el-option label="低" value="low"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="截止日期" required>
						<el-date-picker v-model="formData.deadline" type="date"/>
					</el-form-item>
					<el-form-item>
						<el-button type="default" @click="reset">重置</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">查询</el-button>
					</el-form-item>
				</el-form>
			</el-row>
			<div class="title-info">
				开发者认证材料列表
			</div>	
			<el-row>
				<el-table :data="tableData" >
					<el-table-column prop="name" label="资料名称" />
					<el-table-column prop="desc" label="资料说明" />
					<el-table-column prop="required" label="是否必传">
						<template slot-scope="scope">
							{{scope.row.required ? '是' : '否'}}
						</template>
					</el-table-column>
					<el-table-column prop="status" label="上传状态">
						<template slot-scope="scope">
							<span v-if="scope.row.status" class="success">
								<i class="el-icon-circle-check"></i>已上传
							</span>
							<span v-else>
								未上传
							</span>
						</template>
					</el-table-column>
					<el-table-column label="备注" >
						<template slot-scope="scope">
							<el-link type="primary">{{scope.row.filename}}</el-link> &nbsp;
							<el-link type="danger" v-if="scope.row.status">删除</el-link>
						</template>
					</el-table-column>
					<el-table-column label="操作" >
						<template slot-scope="scope">
							<el-button type="text">上传文件</el-button>
							<el-button type="text">下载模板</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-row>
			<br>
			<div class="title-info">
				工单流转轨迹
			</div>	
			<el-row>
				<el-table :data="tableData2" stripe :header-cell-style="{backgroundColor:'#FAFAFA'}">
					<el-table-column prop="createBy" label="处理人" />
					<el-table-column prop="time" label="处理时间" />
					<el-table-column prop="operation" label="操作" />
					<el-table-column prop="opinion" label="处理意见" />
				</el-table>
			</el-row>
			<br>
			<div class="title-info">
				工单操作
			</div>	
			<el-row type="flex">
				<el-col :span="6">
					<el-row type="flex" align="center">
						<span class="form-item-label">操作类型</span>
						<el-select class="form-item" size="small" v-model="approvalFormData.type">
							<el-option label="回复" value="1"></el-option>
							<el-option label="转派" value="2"></el-option>
							<el-option label="关闭" value="3"></el-option>
						</el-select>
					</el-row>
				</el-col>
				<el-col :span="6">
					<el-row type="flex" align="center">
						<span class="form-item-label">转派角色</span>
						<el-select class="form-item" size="small" v-model="approvalFormData.role">
							<el-option label="角色A" value="1"></el-option>
							<el-option label="角色B" value="2"></el-option>
							<el-option label="角色C" value="3"></el-option>
						</el-select>
					</el-row>
				</el-col>
				<el-col :span="6">
					<el-row type="flex" align="center">
						<span class="form-item-label">转派用户</span>
						<el-select class="form-item" size="small" v-model="approvalFormData.user">
							<el-option label="用户A" value="1"></el-option>
							<el-option label="用户b" value="2"></el-option>
							<el-option label="用户C" value="3"></el-option>
						</el-select>
					</el-row>
				</el-col>
			</el-row>
			<br>
			<el-row type="flex">
				<el-col :span="18">
					<el-row type="flex" align="center">
						<span class="form-item-label">操作意见</span>
						<el-input class="form-item" type="textarea" 
							v-model="approvalFormData.opinion" :rows="4"></el-input>
					</el-row>
				</el-col>
			</el-row>
			<br>
			<el-row type="flex" justify="center">
				<el-button size="small">取 消</el-button>
				<el-button size="small" type="primary" @click="submit">提 交</el-button>
			</el-row>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				approvalFormData: {
					
				},
				formData: {
					type: 'certificate'
				},
				tableData: [
					{
						name: '个人简历',
						desc: 'xxxxxxxx',
						required: true,
						status: true ,
						filename: 'xxx简历.docx',
						filepath: '#'
					},
					{
						name: '其他资料1',
						desc: 'xxxxxxxx',
						required: true,
						status: false ,
						filename: '',
						filepath: '#'
					},
					{
						name: '其他资料2',
						desc: 'xxxxxxxx',
						required: true,
						status: false ,
						filename: '',
						filepath: '#'
					},
					{
						name: '其他资料3',
						desc: 'xxxxxxxx',
						required: true,
						status: false ,
						filename: '',
						filepath: '#'
					},
				],
				tableData2: [
					{
						name:'张三',
						time: '2022-06-03 12:24:13',
						operation: '转派',
						opinion: 'xxxxxxxxxxx'
					},
					{
						name:'李四',
						time: '2022-06-03 14:24:13',
						operation: '转派',
						opinion: 'xxxxxxxxxxx'
					},
					{
						name:'张三',
						time: '2022-06-03 18:24:13',
						operation: '回复',
						opinion: 'xxxxxxxxxxx'
					},
				]
			}
		},
		methods: {
			submit() {
				this.$router.push('/devWorkOrderManagement')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.resource-apply-detail {
		height: calc(100vh - 100px);
		background-color: #f8f8f8;
		padding: 5px 30px 10px;
		
		.main {
			height: 92%;
			background-color: white;
			overflow-y: auto;
			box-sizing: border-box;
			padding: 10px 20px;
			.title-info {
				position: relative;
				margin: 10px 0 15px; 
				&::before {
					position: absolute;
					content: '';
					display: block;
					width: 3px;
					height: 90%;
					background-color: #55aaff;
					left: -8px;
					top: 6%; 
				}
			}
			
			.application-status {
				display: flex;
				height: 100%;
				align-items: center;
				justify-content: center;
			}
		}
	}
	span.success {
		color: #67C23A;
	}
	.form-item-label {
		display: flex;
		min-width: 60px;
		margin-right: 10px;
		font-size: 14px;
		color: #606266;
		align-items: center;
	}
	.form-item {
		flex-grow: 1;
		margin-right: 15px;
	}
</style>